<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>{{msg}}</h2>
			<button @click="changeMsg">点击更新</button>
		</div>
	</body>
	<script>
		new Vue({
			el:'#root',
			data(){
				return {
					msg:'hello'
				}
			},
			methods:{
				changeMsg(){
					this.msg = '张三'
				}
			},
			mounted(){
				console.log('mounted',this.$el)
			},
			beforeUpdate(){
				//重新渲染虚拟DOM之前
				//数据已改变，但虚拟DOM未更新，数据与页面更新不同步
				console.log(this.msg)
				console.log('beforeUpdate',this.$el)
				debugger
			},
			//新旧虚拟DOM进行Diff算法对比，完成页面更新
			updated(){
				//更新直接触发mounted挂载真实DOM之后
				//数据与页面保持同步
				console.log(this.msg)
				console.log('updated',this.$el)
				// debugger
			}
		})
	</script>
</html>